<template>
  <el-dialog width="80%" title="报警列表" :visible.sync="show" custom-class="dialogClass" :close-on-press-escape="false" :close-on-click-modal="false" @close="handleClose">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="报警时间：">
          <el-col :span="12">
            <el-date-picker
                    v-model="pickDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2" :offset="2">
            <el-button type="primary" @click="queryData">查询</el-button>
          </el-col>
      </el-form-item>
    </el-form>
    <el-table :data="alarmGridData">
      <el-table-column property="alarmTime" label="报警时间" align="center"></el-table-column>
      <el-table-column property="deviceUserId" label="主机" align="center" :formatter="formatDeviceUserId"></el-table-column>
      <el-table-column property="event" label="事件" align="center"></el-table-column>
      <el-table-column property="sectorNum" label="防区号" align="center" :formatter="formatSectorNum"></el-table-column>
      <el-table-column property="userName" label="用户名" align="center"></el-table-column>
      <el-table-column property="userAddress" label="用户地址" align="center"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[alarmPageSize]"
          :page-size="alarmPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="alarmTotal">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import moment from "moment";

  export default {
  name: "alarmList",
  data(){
    return {
      show: this.showDiaolog,
      alarmGridData: [],
      alarmTotal: 0,
      alarmPageNum: 1,
      alarmPageSize: 10,
      form: {
        startTime: '',
        endTime: ''
      },
      pickDate: ''
    }
  },
  props: {
    showDiaolog: Boolean,
    default: () => {
      return false
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleClose() {
      this.$emit('setDialogShow', {
        name: '',
        show: false
      })
    },
    queryData() {
      this.alarmPageNum = 1
      this.getTableData()
    },
    getTableData() {
      let startTime = this.pickDate ? moment(this.pickDate[0]).format('yyyy-MM-DD') : ''
      let endTime = this.pickDate ? moment(this.pickDate[1]).format('yyyy-MM-DD') : ''
      this.request.get('/uozo-alarm/device/getAlarmList', {
        startTime: startTime+'00:00:00',
        endTime: endTime+'23:59:00',
        pageNumNum: this.alarmPageNum,
        pageSizeSize: this.alarmPageSize
      }).then(res => {
        console.log(res, 'res')
        this.alarmTotal = res.total
        console.log('this.alarmTotal', this.alarmTotal)
        console.log('this.alarmGridData', this.alarmGridData)
        this.alarmGridData = res.list
        this.alarmGridData.map(item => {
          return item.event = item.cidcode ? `${item.cidcode.alarmcontent}（CID:${item.cidcode.alarmcode}）` : ''
        })
        console.log(this.alarmGridData)
        this.alarmGridData.map(item => {
          return item.userName = item.user ? item.user.name : '暂无'
        })
        this.alarmGridData.map(item => {
          return item.userAddress = item.user ? item.user.address : '暂无'
        })
      }).catch(err => {
        console.log('出错了', err)
        this.alarmGridData = []
        this.alarmTotal = 0
      })
    },
    handleSizeChange(val) {
      this.alarmPageSize=val;
    },
    handleCurrentChange(val) {
      this.alarmPageNum = val;
      this.getTableData()
    },
    formatDeviceUserId(row, column,cellValue) {
      // 设备号不足8位的，在前边加“0”补足8位
      let length = cellValue.toString().length
      let plusString = 8 - length
      if (plusString > 0) {
        let str = ''
        for (let i = 0; i < plusString; i++) {
          str+='0'
        }
        return str + cellValue.toString()
      } else {
        return cellValue
      }
    },
    formatSectorNum(row, column,cellValue) {
      // 设备号不足8位的，在前边加“0”补足8位
      let length = cellValue.toString().length
      let plusString = 3 - length
      if (plusString > 0) {
        let str = ''
        for (let i = 0; i < plusString; i++) {
          str+='0'
        }
        return str + cellValue.toString()
      } else {
        return cellValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>



